Serve static files with Next.js

• Next.js can serve static files in the public directory. Anything file in that directory will be served on the / of our website.
• We're going to create a BlogpostImage styled component so we can display an image at the top of each blogpost

export const BlogpostImage = styled.img`
    width: 100%;
    height; auto;
    margin: 20px 0;
`;

• Add an image to the public directory of your project and add a BlogpostImage with a src that points to that file. Unsplash is a great place to get a photo if you want a cool one.
• You can also serve html files this way.

Use Head tag in Next.js to add metatags to a site

• Next.js has a Head tag where we can add metatags such as title or og:title to our site.
• To use Head just import Head from "next/head"
• Add the Head component to your BlogPost component and then add a <title> tag with the post.title and a <meta property="og:title" content={post.title}/>
• You can put any meta tags you want into here. 📜 Open Graph protocol Docs 💡 Why don't you try adding the image you added as an "og:image"

  Previous      Next